<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0//theme-chalk/index.css"
    />
  </head>
  <body>
    <div id="app">
      <p style="font-size: 30px">CPM内容生成</p>

      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="引导文字" prop="src_txt">
          <el-input
            :rows="6"
            type="textarea"
            v-model="ruleForm.src_txt"
          ></el-input>
        </el-form-item>
        <el-form-item label="结果数量" prop="num_dst">
          <el-input-number v-model="ruleForm.num_dst"></el-input-number>
        </el-form-item>
        <el-form-item label="续写文字长度" prop="char_num_dst">
          <el-input-number v-model="ruleForm.char_num_dst"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleForm)"
            >提交</el-button
          >
        </el-form-item>
      </el-form>

      结果

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="num" label="序号" width="80"> </el-table-column>
        <el-table-column prop="dst" label="内容">
          <template slot-scope="scope">
            <el-input
              :rows="12"
              type="textarea"
              v-model="scope.row.dst"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </body>
  <!-- 先引入 Vue -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0//index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

  <script>
    const headerJSON = {
      "Content-Type": "application/json",
    };
    new Vue({
      el: "#app",
      data() {
        let a = new Date();

        return {
          tableData: [],
          ruleForm: {
            src_txt: "默写英文：\n狗dog\n猫cat\n鸟",
            char_num_dst: 500,
            num_dst: 1,
          },
        };
      },
      methods: {
        submitForm(ruleForm) {
          console.log("ruleForm", ruleForm);

          // this.tableData = [];
          // data = ["234234"];
          // for (var i = 0; i < data.length; i++) {
          //   this.tableData.push({ id: i, dst: data[i] });
          // }
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          axios
            .post("/predict", { item: ruleForm })
            .then((response) => {
              this.tableData = [];
              for (var i = 0; i < response.data.length; i++) {
                this.tableData.push({ num: i, dst: response.data[i] });
              }
              console.log(response);
              loading.close();
            })
            .catch((error) => {
              console.log(error);
              loading.close();

              this.$notify({
                title: "警告",
                message: "请求失败: " + error,
                type: "warning",
              });
            });
        },
      },
      created() {},
    });
  </script>
</html>
